extends ./layouts/default


block title 
  title Koa Douban 首页

block content
  style.
    
  include ./includes/header
  body
    .container-fluid
      .row
        .col-12.col-md-3.col-xl-2.sidebar
          ul.side-menu
            li.side-menu-item
              a(href='/1') 链接1
            li.side-menu-item
             a(href='2') 链接2
        .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content
          .row
            .col-md-6
              .card
                img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://jq22.qiniudn.com/www.jq22.commi4.webm')
                .card-body
                  h4.card-title 这是电影标题
                  p.card-desc 电影描述
                .card-footer
                  small.text-muted 1 天前更新
            .col-md-6
              .card
                img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://jq22.qiniudn.com/www.jq22.commi4.webm')
                .card-body
                  h4.card-title 这是电影标题
                  p.card-desc 电影描述
                .card-footer
                  small.text-muted 1 天前更新
          .row
            .col-md-6
              .card
                img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://jq22.qiniudn.com/www.jq22.commi4.webm')
                .card-body
                  h4.card-title 这是电影标题
                  p.card-desc 电影描述
                .card-footer
                  small.text-muted 1 天前更新
            .col-md-6
              .card
                img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://jq22.qiniudn.com/www.jq22.commi4.webm')
                .card-body
                  h4.card-title 这是电影标题
                  p.card-desc 电影描述
                .card-footer
                  small.text-muted 1 天前更新
  #myModal.modal.fade.bd-example-modal-lg(tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true')
    .modal-dialog.modal-lg
      #videoModal.modal-content
  include ./includes/script
  script.
    var player = null
    $(document).ready(function () {
      $('#myModal').on('hidden.bs.modal', function (e) {
        if (player && player.pause) player.pause()
      })
      $('.card-img-top').click(function (e) {
        var video = $(this).data('video')
        var image = $(this).attr('src')
        $('#myModal').modal('show')
        if (!player) {
          player = new DPlayer({
            container: document.getElementById('videoModal'),
            screenshot: true,
            video: {
              url: video,
              pic: image,
              thumbnails: image
            }
          })
        } else {
          if (player.video.currentSrc !== video) {
            player.switchVideo({
              url: video,
              pic: image,
              type: 'auto'
            })
          }
        }
      })
    })